{% extends "NarbarIndex.html" %}

{% load static %}

{% block title %}模拟账户{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-lg-5">
            <div class="row">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon" id="sizing-addon1">账户名称</span>
                    <input type="text"
                           class="form-control"
                           value="{{ name }}"
                           aria-describedby="sizing-addon1"
                           style="background-color: #FFFFFF"
                           readonly>
                </div>
            </div>
            <div class="row">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon" id="sizing-addon2">可用金额</span>
                    <input type="text"
                           class="form-control"
                           value="{{ money }}"
                           aria-describedby="sizing-addon2"
                           style="background-color: #FFFFFF"
                           readonly>
                </div>
            </div>
            <hr/>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <span class="input-group-addon" id="sizing-addon3">股票代码</span>
                        <input type="text"
                               id="code_input"
                               class="form-control"
                               placeholder="请输入股票"
                               aria-describedby="sizing-addon3"
                               style="background-color: #FFFFFF;"
                               >
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="input-group">
                        <span class="input-group-addon" id="sizing-addon4">购买数量</span>
                        <input type="text"
                               id="number_input"
                               class="form-control"
                               placeholder="请输入股数"
                               aria-describedby="sizing-addon4"
                                   style="background-color: #FFFFFF"
                                   >
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <input id="stock_code_label" type="text" class="form-control" style="background-color: #FFFFFF;display:none;" readonly>
                </div>
                <div class="col-lg-4">
                    <input id="stock_price_label" type="text" class="form-control" style="background-color: #FFFFFF;display:none;" readonly>
                </div>
                <div class="col-lg-4" align="right">
                    <button id="buy_btn" type="button" class="btn btn-primary" value="{{ account_id }}" disabled="disabled">确定</button>
                    <button id="clean_btn" type="button" class="btn btn-danger">清空</button>
                </div>
            </div>
            <hr />
            <div class="row">
                <table class="table table-bordered">
                <thead>
                    <tr>
                        <td width="10%" align="center">ID</td>
                        <td width="25%">股票代码</td>
                        <td width="25%">持有股数</td>
                        <td width="25%">成本价</td>
                        <td width="10%"></td>
                    </tr>
                </thead>
                {% for pos in ltPosition %}
                    <tr>
                        <td align="center">{{ forloop.counter }}</td>
                        <td>{{ pos.code }}</td>
                        <td>{{ pos.number }}</td>
                        <td>￥{{ pos.price }}</td>
                        <td>
                           <button type="button"
                                   class="btn btn-default btn-sm btn-sell"
                                   data-toggle="modal"
                                   value="{{ pos.code }}"
                                   data-target=".bs-example-modal-sm">卖出</button>
                        </td>
                    </tr>
                {% endfor %}
            </table>
            </div>
        </div>
        <div class="col-lg-7"  id="records"></div>
    </div>
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="row" align="left" style="width:95%;margin-left: 5px;">
                    <div class="input-group">
                        <span class="input-group-addon" id="sizing-addon5">数量</span>
                        <input type="text"
                               id="sell_input"
                               class="form-control"
                               placeholder="请输入股数"
                               aria-describedby="sizing-addon5"
                                   style="background-color: #FFFFFF"
                                   >
                    </div>
                </div>
                <div class="row" align="left" style="width:95%;margin-left: 5px;">
                    <button id="sell_by_number" type="button" class="btn btn-primary" data-dismiss="modal">卖出部分</button>
                    <button id="sell_all" type="button" class="btn btn-danger" data-dismiss="modal">全部卖掉</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block myjs %}
    <script type="text/javascript" src="{% static 'Account/account.js' %}" ></script>
{% endblock %}
